<template>
    <div class="content">
        <el-tabs type="border-card" @tab-click="tab">
            <el-tab-pane label="收银台">
                <div class="item" v-show="dataFlag">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane name="first">
                            <div slot="label" class="label"><img
                                    src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%BC%B4%E8%B4%B9%E7%AE%A1%E7%90%86/u11158.svg"
                                    alt=""> 按房间查询
                            </div>
                            <div class="inquire">
                                <div class="inquire-item">
                                    <p>小区</p>
                                    <el-input placeholder="幸福小区" :disabled="true">
                                    </el-input>
                                </div>
                                <div class="inquire-item">
                                    <p>房间信息</p>
                                    <el-cascader :options="options" clearable @change="handleChange"></el-cascader>
                                </div>

                                <div class="inquire-item">
                                    <p></p>
                                    <el-button type="primary" @click="charge(0)">去收费</el-button>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane name="second">
                            <div slot="label" class="label"><img
                                    src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%BC%B4%E8%B4%B9%E7%AE%A1%E7%90%86/u11159.svg"
                                    alt=""> 按业主查询</div>
                            <div class="inquire">
                                <div class="inquire-item">
                                    <p>小区</p>
                                    <el-input placeholder="幸福小区" :disabled="true">
                                    </el-input>
                                </div>
                                <div class="inquire-item">
                                    <p>业主姓名</p>
                                    <el-input placeholder="请输入姓名" v-model="ownerNameIpt" clearable>
                                    </el-input>
                                </div>
                                <div class="inquire-item">
                                    <p>业主手机号</p>
                                    <el-input placeholder="请输入手机号" v-model="ownerNumIpt" clearable>
                                    </el-input>
                                </div>
                                <div class="inquire-item">
                                    <p></p>
                                    <el-button type="primary" @click="charge(1)">去收费</el-button>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane name="third">
                            <div slot="label" class="label"><img
                                    src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%BC%B4%E8%B4%B9%E7%AE%A1%E7%90%86/u11161.svg"
                                    alt="">数据统计</div>

                        </el-tab-pane>

                    </el-tabs>
                </div>
                <div class="statistics" v-show="!dataFlag && !goCharge">
                    <div class="statistics-top">
                        <div class="return">
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%BC%B4%E8%B4%B9%E7%AE%A1%E7%90%86/u11355.svg"
                                alt="">
                            <span>返回</span>
                        </div>
                        <img class="line"
                            src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%BC%B4%E8%B4%B9%E7%AE%A1%E7%90%86/u11354.svg"
                            alt="">
                        <div class="year">
                            <SelectIpt>
                                <p>年份选择</p>
                            </SelectIpt>
                            <div class="btn">
                                <BlueBtn>查询</BlueBtn>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="table">
                      
                            <el-table border style="width: 100%">
                                <el-table-column label="收费项" width="180">
                                    单价
                                </el-table-column>
                                <el-table-column label="物业管理费" width="180">
                                    3.00元/（m²*月）
                                </el-table-column>
                                <el-table-column label="垃圾清运费">
                                    20.00元/（户*月）
                                </el-table-column>
                                <el-table-column label="物业管理费">
                                    3.00元/（m²*月）
                                </el-table-column>
                                <el-table-column label="垃圾清运费">
                                    20.00元/（户*月）
                                </el-table-column>
                            </el-table>
                    </div> -->
                    <div class="echarts">
                        <div class="echarts-left">
                            <!-- 物业管理费 -->
                            <div class="echarts-left-item">
                                <div class="top">
                                    <h2>费用缴纳情况</h2>
                                    <div class="top-right">
                                        <!-- <SelectIpt  :lists="allList" ref="allList"></SelectIpt> -->
                                        <el-select v-model="value" placeholder="请选择" @change="allListValue">
                                            <el-option v-for="(item, index) in allList" :key="index" :label="item"
                                                :value="item">
                                            </el-option>
                                        </el-select>
                                        <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%BC%B4%E8%B4%B9%E7%AE%A1%E7%90%86/%E5%9B%BE%E6%A0%8754_u11342.svg"
                                            alt="">
                                    </div>
                                </div>
                                <div class="cost">
                                    <div class="cost-left">

                                        <p class="cost-title">{{ value }}</p>
                                        <ul>
                                            <li>
                                                <p class="shouldPrice">应收总额（元）</p>
                                                <p class="shoudldPriceNum">
                                                    {{ allPrice1.receivable.toFixed(2) }}
                                                </p>
                                            </li>
                                            <li>
                                                <p class="shouldPrice">实收（元）</p>
                                                <p class="PriceNum">
                                                    {{ allPrice1.paid.toFixed(2) }}
                                                </p>
                                            </li>
                                            <li>
                                                <p class="shouldPrice">未收（元）</p>
                                                <p class="NoshoudldPriceNum">
                                                    {{ (allPrice1.receivable - allPrice1.paid).toFixed(2) }}
                                                </p>
                                            </li>
                                        </ul>

                                    </div>
                                    <div class="cost-right" ref="echarts">

                                    </div>
                                </div>
                            </div>
                            <!-- 欠费情况 -->
                            <div class="echarts-left-item">
                                <div class="top">
                                    <h2>欠费情况</h2>
                                    <div class="top-right">

                                    </div>
                                </div>
                                <div ref="shouldPrice" class="shouldPrice-charts">

                                </div>
                            </div>
                        </div>
                        <div class="echarts-right">

                            <div class="echarts-right-item">
                                <div class="top">
                                    <h2>费用缴纳情况</h2>
                                </div>
                                <div class="echartsLine" ref="echartsLine">

                                </div>
                            </div>
                            <div class="echarts-right-item">
                                <div class="top">
                                    <h2>费用缴纳情况</h2>
                                </div>
                                <div class="echartsPie" ref="echartPie">

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="goCharge" v-show="!dataFlag && goCharge">
                    <div class="goCharge-top">
                        <p class="goCharge-title">{{ roomInfo.join('') }}</p>
                        <div class="goCharge-name">
                            <img src="https://cdn7.axureshop.com/demo2024/2178128/images/%E7%BC%B4%E8%B4%B9%E7%AE%A1%E7%90%86/u11801.svg"
                                alt="">
                            <span>{{ ownerName }}（户主）</span>
                        </div>
                        <p class="goCharge-num">{{ ownerPhone }}</p>
                        <p class="return" @click="go()">返回</p>
                    </div>
                    <div class="goCharge-bottom">
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="缴纳情况" name="first">
                                <ul class="select">
                                    <li>
                                        <SelectIpt :lists="yearIpt" ref="year">
                                            <p>年份选择</p>
                                        </SelectIpt>
                                    </li>
                                    <li>
                                        <SelectIpt :lists="feeIpt" ref="fee">
                                            <p>缴费项</p>
                                        </SelectIpt>
                                    </li>
                                    <li>
                                        <SelectIpt :lists="feeStateIpt" ref="feeState">
                                            <p>缴费状态</p>
                                        </SelectIpt>
                                    </li>
                                    <li>
                                        <BlueBtn @click.native="feeSearch">查询</BlueBtn>
                                    </li>
                                    <li>
                                        <BlueBtn>线下缴费</BlueBtn>
                                    </li>
                                    <li>
                                        <BlueBtn>冲抵</BlueBtn>
                                    </li>
                                    <li>
                                        <GreenBtn>导出</GreenBtn>
                                    </li>
                                </ul>
                                <ul class="money">
                                    <li>
                                        <p class="money-titel">应收总额（元）</p>
                                        <p class="money-num">{{ allPrice.toFixed(2) }}</p>
                                    </li>
                                    <li>
                                        <p class="money-titel">实收总额（元）</p>
                                        <p class="money-num">{{ paidPrice.toFixed(2) }}</p>
                                    </li>
                                    <li>
                                        <p class="money-titel">优惠总额（元）</p>
                                        <p class="money-num">{{ (allPrice - paidPrice - noPaidPrice).toFixed(2) }}</p>
                                    </li>
                                    <li>
                                        <p class="money-titel">未收总额（元）</p>
                                        <p class="money-num">{{ noPaidPrice.toFixed(2) }}</p>
                                    </li>
                                    <li>
                                        <p class="money-titel">预存总余额（元）</p>
                                        <p class="money-num">200000.00</p>
                                    </li>
                                </ul>
                                <div class="table">
                                    <el-table :data="filterData.slice(pages, pages + 8)" border style="width: 100%"
                                        @selection-change="handleSelectionChange">
                                        <el-table-column type="selection" width="55">
                                        </el-table-column>
                                        <el-table-column v-for="column in tableColumns" :key="column.prop"
                                            :prop="column.prop" :label="column.label" :width="column.width || null">
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button @click="handleClick(scope.row)" type="text" size="small">{{
                                                    scope.row.State != '已缴纳' ? '作废' : "" }}</el-button>

                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="page">
                                        <div class="total-page">
                                            <p>共<span>{{ Math.ceil(filterData.length / 8) }}</span>页/<span>{{
                                                filterData.length }}</span>条数据
                                            </p>
                                        </div>
                                        <el-pagination background layout="prev, pager, next,jumper"
                                            @current-change="getPage" :page-size=8 :total="filterData.length"
                                            hide-on-single-page>
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="交易记录" name="second">
                                <ul class="select">
                                    <li>
                                        <SelectIpt :lists="yearIpt" ref="years">
                                            <p>年份选择</p>
                                        </SelectIpt>
                                    </li>
                                    <!-- <li>
                                        <SelectIpt>
                                            <p>月份</p>
                                        </SelectIpt>
                                    </li> -->
                                    <li>
                                        <SelectIpt :lists="channels" ref="channels">
                                            <p>缴费渠道</p>
                                        </SelectIpt>
                                    </li>
                                    <li>
                                        <SelectIpt :lists="platform" ref="platform">
                                            <p>缴费平台</p>
                                        </SelectIpt>
                                    </li>
                                    <li>
                                        <SelectIpt :lists="playState" ref="playState">
                                            <p>支付状态</p>
                                        </SelectIpt>
                                    </li>
                                    <li>
                                        <TextIpt ref="playNum">
                                            <p>账单号</p>
                                        </TextIpt>
                                    </li>
                                </ul>
                                <div class="select-btn">
                                    <BlueBtn @click.native="transaction">查询</BlueBtn>
                                    <GreenBtn>导出</GreenBtn>
                                </div>
                                <div class="table">
                                    <el-table :data="transactionRecords" border style="width: 100%">
                                        <el-table-column v-for="column in table1Columns" :key="column.prop"
                                            :prop="column.prop" :label="column.label" :width="column.width || null">
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button @click="handleClick(scope.row)" type="text" size="small">明细
                                                </el-button>
                                                <el-button v-if="scope.row.PlayState != '支付失败'"
                                                    @click="handleClick(scope.row)" type="text" size="small">开收据
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>

                        </el-tabs>

                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="缴费情况">
                <div class="top-shouldPrice">
                    <ul>
                        <li>
                            <SelectIpt>
                                <p>年份</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt>
                                <p>楼栋</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt>
                                <p>单元</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt>
                                <p>楼层</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt>
                                <p>房号</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt>
                                <p>缴费状态</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt>
                                <p>欠费月数</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <TextIpt>
                                <p>户主</p>
                            </TextIpt>
                        </li>
                        <li>
                            <TextIpt>
                                <p>手机号码</p>
                            </TextIpt>
                        </li>
                    </ul>
                    <div class="btn">
                        <BlueBtn>查询</BlueBtn>
                        <BlueBtn>催缴</BlueBtn>
                        <GreenBtn>导出</GreenBtn>
                        <RedBtn>批量作废账单</RedBtn>
                        <BlueBtn>作废账单记录</BlueBtn>
                    </div>
                </div>
                <ul class="money">
                    <li>
                        <p class="money-titel">应收总额（元）</p>
                        <p class="money-num">1440.00</p>
                    </li>
                    <li>
                        <p class="money-titel">实收总额（元）</p>
                        <p class="money-num">700.00</p>
                    </li>
                    <li>
                        <p class="money-titel">优惠总额（元）</p>
                        <p class="money-num">20.00</p>
                    </li>
                    <li>
                        <p class="money-titel">未收总额（元）</p>
                        <p class="money-num">720.00</p>
                    </li>
                    <li>
                        <p class="money-titel">预存总余额（元）</p>
                        <p class="money-num">200000.00</p>
                    </li>
                </ul>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="日期" width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="交易记录">
                <div class="top-shouldPrice">
                    <ul>
                        <li>
                            <SelectIpt :lists="transactionYearIpt" ref="transactionYearIpt">
                                <p>年份选择</p>
                            </SelectIpt>
                        </li>
                        <!-- <li>
                            <SelectIpt>
                                <p>月份</p>
                            </SelectIpt>
                        </li> -->
                        <li>
                            <SelectIpt :lists="transactionBuildIpt" ref="transactionBuildIpt">
                                <p>楼栋</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt :lists="transactionUnitIpt" ref="transactionUnitIpt">
                                <p>单元</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt :lists="transactionFloorIpt" ref="transactionFloorIpt">
                                <p>楼层</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt :lists="transactionRoomIpt" ref="transactionRoomIpt">
                                <p>房号</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt :lists="transactionPlatformIpt" ref="transactionPlatformIpt">
                                <p>缴费平台</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt :lists="transactionChanelsIpt" ref="transactionChanelsIpt">
                                <p>缴费渠道</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <SelectIpt :lists="transactionStateIpt" ref="transactionStateIpt">
                                <p>支付状态</p>
                            </SelectIpt>
                        </li>
                        <li>
                            <TextIpt ref="transactionNumberIpt">
                                <p>账单号</p>
                            </TextIpt>
                        </li>
                    </ul>
                    <div class="btn">
                        <BlueBtn @click.native="serachTransaction">查询</BlueBtn>
                        <GreenBtn>导出</GreenBtn>
                    </div>
                </div>
                <ul class="money">

                    <li>
                        <p class="money-titel">实收总额（元）</p>
                        <p class="money-num">700.00</p>
                    </li>
                    <li>
                        <p class="money-titel">实收订单数</p>
                        <p class="money-num">70</p>
                    </li>

                </ul>
                <div class="table">
                    <el-table ref="multipleTable" border :data="recordsArr.slice(recordsPages, recordsPages + 8)"
                        tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column v-for="column in table2Columns" :key="column.prop" :prop="column.prop"
                            :label="column.label" :width="column.width || null">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="subsidiary(scope.row)" type="text" size="small">明细</el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page">
                        <div class="total-page">
                            <p>共<span>{{ Math.ceil(recordsArr.length / 8) }}</span>页/<span>{{
                                recordsArr.length }}</span>条数据
                            </p>
                        </div>
                        <el-pagination background layout="prev, pager, next,jumper" @current-change="getRecordsPages"
                            :page-size=8 :total="recordsArr.length" hide-on-single-page>
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="费用设置">费用设置</el-tab-pane>
            <el-tab-pane label="收款商户绑定">收款商户绑定</el-tab-pane>
            <el-tab-pane label="优惠配置">优惠配置</el-tab-pane> -->
        </el-tabs>
        <!-- 交易记录里的查看弹窗 -->
        <el-dialog title="提示" :visible.sync="dialogRecords" width="60%">
            <div class="dialogContent">
                <ul class="dialogContent-top">
                    <li>
                        <span class="dialogLabel">账单号：{{this.dialogData.BillNumber}}</span>
                    </li>
                    <li>
                        <span class="dialogLabel">账单人：{{this.dialogData.owner}}</span>
                    </li>
                    <li>
                        <span class="dialogLabel">房屋：{{this.dialogData.build}}</span>
                    </li>
                    <li>
                        <span class="dialogLabel">缴费渠道：{{this.dialogData.channel}}</span>
                    </li>
                    <li>
                        <span class="dialogLabel">付款时间：{{this.dialogData.paymentTime}}</span>
                    </li>
                    <li>
                        <span class="dialogLabel">订单状态：{{this.dialogData.playState}}</span>
                    </li>
                </ul>
                <el-table :data="dialogData.dialogFilter" border style="width: 100%">
                    <el-table-column v-for="column in table3Columns" :key="column.prop" :prop="column.prop"
                            :label="column.label" :width="column.width || null">
                        </el-table-column>
                </el-table>
                <p>交易流水号：{{this.dialogData.seriaNumber}}</p>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import BlueBtn from '@/components/BlueBtn.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import TextIpt from '@/components/TextIpt.vue';
import RedBtn from '@/components/RedBtn.vue';
import * as echarts from 'echarts';
export default {
    components: {
        SelectIpt,
        BlueBtn,
        GreenBtn,
        TextIpt,
        RedBtn
    },
    data() {
        return {
            //交易记录里的上面的选择框
            transactionYearIpt:['2022','2021'],
            transactionBuildIpt:['楼栋A','楼栋B','楼栋C','楼栋D'],
            transactionUnitIpt:['1单元','2单元','3单元'],
            transactionFloorIpt:['一层','二层','三层'],
            transactionRoomIpt:['101','102','201','202','301','302'],
            transactionPlatformIpt:['微信支付','其他'],
            transactionChanelsIpt:['微信(线上)','线下','预存'],
            transactionStateIpt:['已缴纳','未缴纳'],
            //交易记录对话框里的数据
            dialogData:{
                BillNumber:'',
                owner:'',
                build:'',
                channel:'',
                paymentTime:'',
                playState:'',
                dialogFilter:[],
                seriaNumber:'',
            },
            //交易记录里的所有数据
            dialogRecords: false,
            recordsArr: [],
            recordsPages: 0,
            //输入框的选项
            yearIpt: ['2022', '2021'],
            feeIpt: ['物业管理费', '垃圾清运费'],
            feeStateIpt: ['已缴纳', '未缴纳'],
            channels: ['微信(线上)', '线下', '线下冲抵', '预存'],
            platform: ['微信支付', '其他'],
            playState: ['支付成功', '支付失败', '待支付'],
            //page
            pages: 0,
            //数据统计的所有数据
            allPriceList: [],
            //费用情况的选择框
            value: '全部',
            allList: [
                '全部', '物业管理费', '垃圾清运费'
            ],
            //数据统计里的全部费用
            allPrice1: {
                //应收
                receivable: 0,
                //实收
                paid: 0,
            },
            //户主
            ownerName: '',
            //户主手机号
            ownerPhone: '',
            //点击缴费情况查询过滤数据
            filterData: [],
            noFilterData: [],
            //交易记录
            transactionRecords: [],
            //房间信息
            roomInfo: [],
            //应收金额
            allPrice: 0,
            //实收金额
            paidPrice: 0,
            //未收金额
            noPaidPrice: 0,
            //预存金额
            amountPrice: 0,
            //接口返回的数据
            employeeFee: [],
            goCharge: true,
            currentRow: null,
            //缴费情况表格
            tableColumns: [
                // { prop: 'RoomID', label: '序号', width: 70, },
                { prop: 'Month', label: '月份', width: 170 },
                { prop: 'Contribution', label: '缴费项', width: 170 },
                { prop: 'Receivable', label: '应收(元)', width: 170 },
                { prop: 'favourable', label: '优惠(元)', width: 170 },
                { prop: 'Paid', label: '实收(元)', width: 170 },
                { prop: 'Monovalent', label: '单价', width: 170 },
                { prop: 'Quantity', label: '数量', width: 170 },
                { prop: 'State', label: '缴费状态', width: 170 },
            ],
            //交易记录表格
            table1Columns: [
                // { prop: 'RoomID', label: '序号', width: 70, },
                { prop: 'PaymentTime', label: '支付时间', width: 200 },
                { prop: 'BillNumber', label: '账单号', width: 200 },
                { prop: 'SerialNumber', label: '交易流水号', width: 200 },
                { prop: 'Paid', label: '实付金额(元)', width: 200 },
                { prop: 'Platform', label: '交易平台', width: 200 },
                { prop: 'Channel', label: '缴费渠道', width: 200 },
                { prop: 'PlayState', label: '支付状态', width: 200 },
            ],
            //交易记录表格
            table2Columns: [
                // { prop: 'RoomID', label: '序号', width: 70, },
                { prop: 'PaymentTime', label: '支付时间', width: 200 },
                { prop: 'BillNumber', label: '账单号', width: 200 },
                { prop: 'SerialNumber', label: '交易流水号', width: 200 },
                { prop: 'Paid', label: '实收金额(元)', width: 150 },
                { prop: 'Platform', label: '缴费平台', width: 200 },
                { prop: 'Channel', label: '缴费渠道', width: 200 },
                { prop: 'PlayState', label: '支付状态', width: 200 },
                { prop: 'State', label: '缴纳情况', width: 200 },

            ],
             //交易记录弹框表格
             table3Columns: [
                // { prop: 'RoomID', label: '序号', width: 70, },
                { prop: 'Month', label: '月份',  },
                { prop: 'Contribution', label: '缴费项',  },
                // { prop: 'SerialNumber', label: '账单周期',  },
                // { prop: 'Paid', label: '收费周期',  },
                { prop: 'Receivable', label: '单价',  },
                { prop: 'Channel', label: '应付总计(元)',  },
                { prop: 'favourable', label: '优惠(元)',  },
                { prop: 'Paid', label: '实付(元)',  },
            ],
            //数据统计
            dataFlag: true,
            //输入框业主姓名
            ownerNameIpt: "",
            //输入框业主电话
            ownerNumIpt: '',
            activeName: 'first',
            options: [
                {
                    "value": "楼栋A",
                    "label": "楼栋A",
                    "children": [
                        {
                            "value": "1单元",
                            "label": "1单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "2单元",
                            "label": "2单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "3单元",
                            "label": "3单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "value": "楼栋B",
                    "label": "楼栋B",
                    "children": [
                        {
                            "value": "1单元",
                            "label": "1单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "2单元",
                            "label": "2单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "3单元",
                            "label": "3单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "value": "楼栋C",
                    "label": "楼栋C",
                    "children": [
                        {
                            "value": "1单元",
                            "label": "1单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "2单元",
                            "label": "2单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "3单元",
                            "label": "3单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "value": "楼栋D",
                    "label": "楼栋D",
                    "children": [
                        {
                            "value": "1单元",
                            "label": "1单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "2单元",
                            "label": "2单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "3单元",
                            "label": "3单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]

        }

    },
    methods: {
        //交易记录 点击查询
        serachTransaction(){
            this.$refs.transactionYearIpt.value
            this.$refs.transactionBuildIpt.value
            this.$refs.transactionUnitIpt.value
            this.$refs.transactionFloorIpt.value
            this.$refs.transactionRoomIpt.value
            this.$refs.transactionPlatformIpt.value
            this.$refs.transactionChanelsIpt.value
            this.$refs.transactionStateIpt.value
            this.$refs.transactionNumberIpt.input
        },
        //交易记录 点击明细
        subsidiary(row){
            this.dialogRecords=true
            this.dialogData.BillNumber=row.BillNumber
            this.dialogData.owner=row.Owner
            this.dialogData.build=row.BuildingName+' '+row.UnitName+' '+row.FloorNumber+' '+row.RoomNumber
            this.dialogData.channel=row.Channel
            this.dialogData.paymentTime=row.PaymentTime
            this.dialogData.playState=row.PlayState
            this.dialogData.dialogFilter=this.employeeFee.filter(item=>item.Owner==row.Owner)
            this.dialogData.seriaNumber=row.SerialNumber
            
        },
        tab(tab, event) {
            if (tab.index == 2) {
                this.getData()
            }
        },
        //交易记录里的查询
        transaction() {
            const serach = {}
            if (this.$refs.years.value) {
                serach.years = this.$refs.years.value
            }
            if (this.$refs.channels.value) {
                serach.channels = this.$refs.channels.value
            }
            if (this.$refs.platform.value) {
                serach.platform = this.$refs.platform.value
            }
            if (this.$refs.playState.value) {
                serach.playState = this.$refs.playState.value
            }
            if (this.$refs.playNum.input) {
                serach.playNum = this.$refs.playNum.input
            }
            this.transactionRecords = this.noFilterData.filter(room => {
                if (serach.years && !room.Month.includes(serach.years)) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.channels && room.Channel !== serach.channels) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 检查UnitName是否匹配
                if (serach.platform && room.Platform !== serach.platform) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.playState && room.PlayState !== serach.playState) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.playNum && !room.BillNumber.includes(serach.playNum)) {
                    return false; // 如果不匹配，则排除该房间
                }

                // 如果所有条件都匹配或为空（表示用户没有为该字段指定筛选条件），则返回true以包含该房间
                return true;

            })

        },
        //缴费情况里的查询
        feeSearch() {
            const serach = {}
            if (this.$refs.year.value) {
                serach.year = this.$refs.year.value
            }
            if (this.$refs.fee.value) {
                serach.fee = this.$refs.fee.value
            }
            if (this.$refs.feeState.value) {
                serach.feeState = this.$refs.feeState.value
            }
            this.filterData = this.noFilterData.filter(room => {

                if (serach.year && !room.Month.includes(serach.year)) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.fee && room.Contribution !== serach.fee) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 检查UnitName是否匹配
                if (serach.feeState && room.State !== serach.feeState) {
                    return false; // 如果不匹配，则排除该房间
                }

                // 如果所有条件都匹配或为空（表示用户没有为该字段指定筛选条件），则返回true以包含该房间
                return true;

            })

        },
        //get 当前页
        getPage(page) {
            this.pages = 8 * (page - 1)
        },
        getRecordsPages(page) {
            this.recordsPages = 8 * (page - 1)
        },
        //费用情况的选择框
        allListValue(value) {
            this.allPrice1.receivable = 0
            this.allPrice1.paid = 0


            this.allPriceList.forEach(item => {
                if (value == '全部') {
                    this.allPrice1.receivable += item.Receivable
                    this.allPrice1.paid += item.Paid
                } else {
                    if (item.Contribution == value) {
                        this.allPrice1.receivable += item.Receivable
                        this.allPrice1.paid += item.Paid
                    }
                }


            })

        },
        //首页
        getAllPrice() {
            //数据请求
            fetch('http://127.0.0.1/fee/allPrice', {
                method: 'GET', // 请求方法
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => res.json()).then(res1 => {
                this.allPriceList = res1
                res1.forEach(item => {
                    this.allPrice1.receivable += item.Receivable
                    this.allPrice1.paid += item.Paid

                })
            }).catch(err => {
                console.log(err);
            })
        },
        //返回
        go() {
            this.dataFlag = true
        },
        //级联选择器
        handleChange(value) {
            this.roomInfo = value
        },
        //缴费管理的表格多选框
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //去收费
        charge(index) {
            if (index) {
                //按业主查询
                if (this.ownerNumIpt == '' && this.ownerNameIpt == '') {
                    this.$message({
                        message: '请输入业主信息',
                        type: 'warning',
                        center: true
                    });
                } else {
                    this.getData(index)
                    this.dataFlag = false
                    this.goCharge = true
                }
            } else {
                if (this.roomInfo == '') {
                    this.$message({
                        message: '请选择房间信息',
                        type: 'warning',
                        center: true
                    });
                } else {
                    this.getData(index)
                    this.dataFlag = false
                    this.goCharge = true
                }
            }
        },
        handleClick(tab) {
            if (tab.index == 2) {
                this.dataFlag = !this.dataFlag
                this.goCharge = false
                this.getAllPrice()
            }
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //数据请求
        getData(index) {
            //数据请求
            fetch('http://127.0.0.1/fee/all', {
                method: 'GET', // 请求方法
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => res.json()).then(res1 => {
                this.employeeFee = res1
                if (index) {
                    if (this.ownerNumIpt == '') {
                        this.filterData = res1.filter(item => item.Owner == this.ownerNameIpt)
                    } else {
                        this.filterData = res1.filter(item => item.Owner == this.ownerNumIpt)
                    }


                } else {
                    this.filterData = res1.filter(item => item.BuildingName == this.roomInfo[0] && item.UnitName == this.roomInfo[1] && item.RoomNumber == this.roomInfo[3])

                }
                this.filterData.forEach(item => {
                    this.allPrice += item.Receivable
                    if (item.State == "已缴纳") {
                        this.paidPrice += item.Paid
                    } else {
                        this.noPaidPrice += item.Paid
                    }
                })
                if (this.filterData.length) {
                    this.noFilterData = this.filterData
                    this.transactionRecords = this.filterData
                    this.ownerName = this.filterData[0].Owner
                    this.ownerPhone = this.filterData[0].Phone
                } else {
                    this.recordsArr = res1
                }

            }).catch(err => {
                console.log(err);
            })
        }

    },
    mounted() {
        var chartDom = this.$refs.echarts;
        var myChart = echarts.init(chartDom);
        var option;

        option = {

            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    // name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },

                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, },
                        { value: 735, },
                        { value: 580, },
                        { value: 484, },
                        { value: 300, }
                    ]
                }
            ]
        };
        option && myChart.setOption(option);
        var chartDom = this.$refs.shouldPrice;
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);
        var chartDom = this.$refs.echartsLine;
        var myChart = echarts.init(chartDom, null, {
            renderer: 'svg'
        });
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            grid: {
                left: 40,
                top: 30,
                bottom: '20%',
                right: 20
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
        var chartDom = this.$refs.echartPie;
        var myChart = echarts.init(chartDom, null, {
            renderer: 'svg'
        });
        var option;

        option = {

            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048 },
                        { value: 735 },
                        { value: 580 },
                        { value: 484 },
                        { value: 300 }
                    ]
                }
            ]
        };

        option && myChart.setOption(option);
    }
}
</script>

<style scoped>
.dialogContent p{
    margin-top: 20px;
    margin-bottom: 20px;
}
.dialogContent>>>.cell{
    text-align: center;
}
.dialogContent{
    padding: 0 20px;
}
.dialogContent-top {
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}
.dialogContent-top li{
    min-width: 33.3%;
    margin-bottom: 15px;
}

.table>>>.el-table {
    min-height: 548px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.top-right>>>input {
    border-color: #DCDFE6 !important;
    height: 30px;
    width: 150px;
}

.top>>>.el-input__icon {
    line-height: 30px;
}

.btn {
    margin-left: 20px;
}

.return {
    cursor: pointer;
}

.table>>>.cell {
    text-align: center;
}

.goCharge-bottom {
    margin-top: 10px;
}

.select-btn {
    margin-top: 20px;
}

.select {
    font-size: 12px;
    color: #666;
    display: flex;
    white-space: nowrap;
}

.select li {
    margin-right: 20px;
}

.goCharge-num {
    margin-right: 20px;
}

.goCharge-name span {
    margin-right: 25px;
}

.goCharge-name img {
    margin-left: 30px;
    margin-right: 15px;
}

.return {
    font-size: 12px;
}

.goCharge-top {
    font-size: 16px;
    color: #666;
    display: flex;
    align-items: center;
}

.money {
    margin-top: 20px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    /* height: 50px; */
    padding: 20px 40px;
}

.money li {
    margin-right: 60px;
}

.money-num {
    color: #FF0000;
    font-size: 15px;
    margin-top: 10px;
}

.money-titel {
    font-size: 12px;
    color: #666;
}

.top-shouldPrice ul {
    display: flex;
    flex-wrap: wrap;
}

.top-shouldPrice li {
    margin-right: 50px;
    margin-bottom: 20px;
}

.top-shouldPrice p {
    white-space: nowrap;
    font-size: 12px;
    color: #666;
}

.echartsPie {
    width: 782px;
    height: 300px;
}

.echartsLine {
    width: 782px;
    height: 180px;
}

.echarts-right {
    width: 50%;
    margin-left: 20px;
}

.echarts {
    padding-bottom: 20px;
    display: flex;
    margin-top: 20px;
}

.shouldPrice-charts {
    width: 782px;
    height: 300px;
}

.echarts-left-item,
.echarts-right-item {
    border: 1px solid rgb(233, 233, 233);
    margin-bottom: 20px;
}

.cost {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
}

.cost-right {
    width: 120px;
    height: 120px;
}

.cost-left ul {
    display: flex;
}

.cost-left li {
    margin-right: 80px;
}

.NoshoudldPriceNum {
    font-size: 20px;
    color: rgb(51, 153, 255);
}

.PriceNum {
    font-size: 20px;
    color: rgb(49, 182, 116);
}

.shoudldPriceNum {
    color: #666;
    font-size: 20px;
}

.shouldPrice {
    font-size: 12px;
    color: #939393;
    margin: 15px 0;
}

.cost-title {
    font-size: 16px;
    color: #333;
}

.echarts-left {
    width: 50%;
}

.top-right img {
    width: 22px;
    height: 19px;
    margin-left: 20px;
}

.top-right {
    display: flex;
    align-items: center;
}

.top h2 {
    color: #4f4f4f;
    font-size: 12px;
}

.top {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid rgb(233, 233, 233);
}

.table {
    padding: 15px 0;
}

/* button {
    margin-left: 25px;
} */

.year p {
    color: #666;
    font-size: 12px;
}

.line {
    margin: 0 50px;
}

.year {
    display: flex;
    align-items: center;
}

.statistics-top {
    display: flex;
    align-items: center;
    height: 30px;

}

.return {
    width: 68px;
    height: 28px;
    border: 1px solid rgba(152, 152, 152, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.return span {
    font-size: 12px;
    color: #000;
    margin-left: 5px;

}

.statistics {
    background: #fff;
    padding: 0 40px;

}



.inquire-item>>>.el-input__icon {
    line-height: 30px;
}

.item>>>.el-tabs__content {
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(217, 217, 217, 1);
}

.inquire-item>>>button {
    width: 350px;
    height: 30px;
    padding: 0;
    font-size: 12px;
}

.inquire-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.inquire>>>input {
    height: 30px;
    width: 350px;
}

.inquire p {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
    margin-right: 30px;
}

.item>>>.is-active .label {
    border: 2px solid rgba(58, 161, 255, 1);
    background-color: rgba(51, 153, 255, 0.0431372549019608);
}

.item>>>.el-tabs__active-bar {
    background-color: inherit
}

.item>>>.el-tabs__active-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* 将伪元素定位在蓝色直线的上方 */
    left: 50%;
    transform: translateX(-50%) rotate(180deg);

    border-width: 32px 35px 0 35px;
    /* border-width: 0 35.5px 15px 35.5px; */
    border-style: solid;
    border-color: #fff transparent;
    /* 三角形的颜色 */
    width: 0;
    /* 宽度和高度必须设置为0，因为我们是通过边框来创建三角形的 */
    height: 0;
}

.item>>>.el-tabs__active-bar::before {
    content: '';
    position: absolute;
    bottom: 0;
    /* 将伪元素定位在蓝色直线的上方 */
    left: 50%;
    transform: translateX(-50%) rotate(180deg);

    border-width: 34px 37px 0 37px;
    /* border-width: 0 35.5px 15px 35.5px; */
    border-style: solid;
    border-color: #e5e5e5 transparent;
    /* 三角形的颜色 */
    width: 0;
    /* 宽度和高度必须设置为0，因为我们是通过边框来创建三角形的 */
    height: 0;
}

.label img {
    margin-right: 20px;
}

.label {
    width: 300px;
    font-size: 20px;
    color: #666;
    height: 54px;
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 6px;
    margin-bottom: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item>>>.el-tabs__item {
    height: auto;
    line-height: 54px;
}

.item {
    width: 60%;
    height: 100vh;
    margin: 140px auto;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.content>>>.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    font-weight: bold;
    font-size: 14px;
}

.content>>>.el-tabs__item {
    font-size: 12px;
}
</style>